<template>
  <div>
    <h2>{{ fullname }}</h2>
    <button @click="setFullName">setFullName</button>
    <h2>{{ scoreLevel }}</h2>
  </div>
</template>

<script>
import { computed, reactive, ref } from 'vue'
export default {
  setup() {
    const name = reactive({
      firstname: 'kobe',
      lastname: 'bryant',
    })

    /* const fullname = computed(() => {
			return name.firstname + ' ' + name.lastname
		}) */

    const fullname = computed({
      set: function (newVal, oldVal) {
        const tempName = newVal.split(' ')
        name.firstname = tempName[0]
        name.lastname = tempName[1]
      },
      get: function () {
        return name.firstname + ' ' + name.lastname
      },
    })

    function setFullName() {
      // 计算属性返回值也是ref, 如果没有定义set方法，直接报错 this._setter is not a function
      fullname.value = 'coder why'
    }

    const score = ref(80)
    const scoreLevel = computed(() => {
      if (score.value <= 50) {
        return '不及格'
      } else if (score.value <= 60) {
        return '及格'
      } else if (score.value <= 80) {
        return '良好'
      } else if (score.value <= 90) {
        return '优秀'
      }
    })

    return {
      name,
      fullname,
      scoreLevel,
      setFullName,
    }
  },
}
</script>

<style scoped></style>
